<template>
    <div class="container" v-cloak>
        <div class="blurBg" :style="{background:'url('+blurBg+') 0 0 no-repeat'}"></div>
        <div class="dataInfo">
            <div class="padding"></div>
            <div class="titleInput font13" flex="main:justify cross:center" v-if="role!=1">
                <input type="text" placeholder="请输入作业标题" maxlength="20" v-model="title" flex-box="1">
                <div class="opacity5 font10 uploadNum" flex-box="0"><span v-text="title.length"></span>/20</div>
            </div>
            <div class="addArea">
                <textarea :class="{'textareaS':(pices.length+oldPics.length)>0}" placeholder="请输入作业内容" ref="textarea" maxlength="2000" v-model="content"></textarea>
                <ul class="imgList" flex="cross:center" v-if="(pices.length+oldPics.length)>0">
                    <li class="imgItem" flex-box="0" v-for="(pic,index) in oldPics"
                        @click="showPicesSwiper(pic,index)">
                        <img :src="imagedomain+pic.imgUrl+'?imageView2/0/w/136/format/jpeg'" v-if="pic.type==1">
                        <img :src="imagedomain+pic.imgUrl+'?vframe/jpeg/offset/1/w/136'" v-if="pic.type==3">
                        <div class="audioWrapper" v-if="pic.type==2">
                            <img src="../../images/audioBg.png"/>
                            <div class="audioTime" flex="main:center cross:center">
                                <span v-text="pic.time>=60?parseInt(pic.time/60):0" flex-box="0"></span>
                                <span flex-box="0">:</span>
                                <span v-text="parseInt(pic.time%60)>=10?parseInt(pic.time%60):'0'+parseInt(pic.time%60)"
                                      flex-box="0"></span>
                            </div>
                        </div>
                        <div class="play" v-if="pic.type==3"></div>
                        <div class="deleteBtn" v-if="canUploadClick" @click.stop="deleteItem(index,oldPics,true)"></div>
                    </li>
                    <li class="imgItem" flex-box="0" v-for="(pic,index) in pices" @click="showPicesSwiper(pic,index)">
                        <img :src="pic.datathumbnail" v-if="pic.datatype!=2">
                        <div class="play" v-if="pic.datatype==3"></div>
                        <div class="audioWrapper" v-if="pic.datatype==2">
                            <img src="../../images/audioBg.png"/>
                            <div class="audioTime" flex="main:center cross:center">
                                <span v-text="pic.datatime>=60?parseInt(pic.datatime/60):0" flex-box="0"></span>
                                <span flex-box="0">:</span>
                                <span v-text="parseInt(pic.datatime%60)>=10?parseInt(pic.datatime%60):'0'+parseInt(pic.datatime%60)"
                                      flex-box="0"></span>
                            </div>
                        </div>
                        <div class="deleteBtn" v-if="canUploadClick" @click.stop="deleteItem(index,pices,false)"></div>
                    </li>
                </ul>
                <div class="btnArea" flex="main:justify cross:center">
                    <div class="leftArea" flex-box="0" flex="cross:bottom">
                        <div flex-box="0" class="leftAreaInner">
                            <div  class="imgBtn" @click="changeFile('album')"></div>
                            <div class="leftAreaFont opacity5" flex="main:center cross:center">相册</div>
                        </div>
                        <div flex-box="0" class="leftAreaInner">
                            <div  class="videoBtn" @click="changeFile('video')"></div>
                            <div class="leftAreaFont opacity5" flex="main:center cross:center">拍摄</div>
                        </div>
                        <div flex-box="0" class="leftAreaInner">
                            <div  class="audioBtn" @click="changeFile('audio')"></div>
                            <div class="leftAreaFont opacity5" flex="main:center cross:center">语音</div>
                        </div>
                    </div>
                    <div class="rightArea font10 uploadNum" flex-box="0"><span v-text="content.length"></span>/2000
                    </div>
                </div>
            </div>
            <div class="homeworkTimeWrapper" v-if="role!=1">
                <p class="opacity5 font12 timeTitle">作业时限</p>
                <ul class="timeList" flex="main:justify cross:center">
                    <li class="timeItem font12 opacity5" :class="{'timeFocus':timeShow===timeItem.id}" v-for="(timeItem,timeIndex) in timeArr" v-text="timeItem.value" @click="changeTime(timeItem.id)" flex="main:center cross:center" flex-box="0"></li>
                </ul>
            </div>
            <div class="timeArea" v-if="role!=1&&timeShow=='show'">
                <div class="timeTop" flex="main:justify cross:center">
                    <div class="startTime">开始时间</div>
                    <div class="endTime">结束时间</div>
                </div>
                <div class="timeBottom" flex="main:justify cross:center">
                    <div class="timeSelect" flex-box="0" flex="main:justify cross:center"
                         @click="getDatePicker(new Date(`${new Date().getFullYear()}/${new Date().getMonth()+1}/${new Date().getDate()} 00:00:00`).getTime(),0,beginTime*1000,true)">
                        <div class="monthTime" flex-box="0" v-text="new Date(beginTime*1000).Format('M月')"></div>
                        <div class="dateTime" flex-box="0" v-text="new Date(beginTime*1000).Format('d日')"></div>
                    </div>
                    <div class="timeSelect" flex-box="0" flex="main:justify cross:center"
                         @click="getDatePicker(beginTime*1000,0,new Date(`${new Date(endTime*1000).getFullYear()}/${new Date(endTime*1000).getMonth()+1}/${new Date(endTime*1000).getDate()} 00:00:00`).getTime(),false)">
                        <div class="monthTime" flex-box="0" v-text="new Date(endTime*1000).Format('M月')"></div>
                        <div class="dateTime" flex-box="0" v-text="new Date(endTime*1000).Format('d日')"></div>
                    </div>
                </div>
            </div>
            <div class="publicArea" flex="main:justify cross:center" v-if="role==1">
                <div class="publicLeft opacity5" flex-box="0">作业相互可见</div>
                <div class="publicRight" flex-box="0" flex="cross:center">
                    <p>不公开</p>
                    <div class="panelContainer" flex="main:justify cross:center">
                        <div class="panelWrap" @click="changeIfPub" :class="{panelWrapFocus:ifPub==1}" flex-box="0"
                             flex="cross:center">
                            <div class="panel" flex-box="0"></div>
                        </div>
                    </div>
                    <p>公开</p>
                </div>
            </div>
        </div>
        <div class="allSendBtn" :class="{'fullBtn':pices.length+oldPics.length>=9}" flex="main:center cross:center"
             v-if="role!=1" @click="save">发送
        </div>
        <div class="allSendBtn" :class="{'fullBtn':pices.length+oldPics.length>=9}" flex="main:center cross:center"
             v-if="role==1" @click="submit">提交
        </div>
        <div class="uploadWrapper" v-if="!canUploadClick"></div>
    </div>
</template>
<script type="text/babel">
    import API from '../../../api/api.js'
    import {imagedomain, domain} from '../../../api/api.js'
    import audioPlayer from '../../../components/audioComponent.vue'
    const api = new API();
    export default{
        data(){
            return {
                timeShow:1,
                timeArr:[{id:1,value:'1天'},{id:3,value:'3天'},{id:5,value:'5天'},{id:0,value:'不限'},{id:'show',value:'自定义'}],
                isPicSubmit:false,
                title: new Date().Format('M月d日')+' 作业',
                domain: domain,
                imagedomain: imagedomain,
                pices: [],
                oldPics: [],
                allPics: [],
                ifPub: 1,
                role: this.$route.query.role ? this.$route.query.role : '',
                content: '',
                imgKeys: [],
                beginTime: new Date(`${new Date().getFullYear()}/${new Date().getMonth() + 1}/${new Date().getDate()} 00:00:00`).getTime() / 1000,
                endTime: new Date(`${new Date(new Date().getTime()).getFullYear()}/${new Date(new Date().getTime()).getMonth() + 1}/${new Date(new Date().getTime()).getDate()} 23:59:59`).getTime() / 1000,
                canUploadClick: true,
                classId: this.$route.query.classId ? this.$route.query.classId : '',
                workId: this.$route.query.workId ? this.$route.query.workId : '',
                replyId: this.$route.query.replyId ? this.$route.query.replyId : '',
                isDetail:this.$route.query.isDetail ? this.$route.query.isDetail : '',
                titleCheck:/[\ud800-\udbff][\udc00-\udfff]/
            }
        },
        mounted(){
            if(this.isDetail!==''){
                this.$util.jsBridgeCallBack('jsLeftAction', this.$util.goBack);
            }else{
                this.$util.jsBridgeCallBack('jsLeftAction', this.closeWebView);
            }
            this.$nextTick(function () {
                if (this.role == 1 && this.replyId) {
                    this.getSingleHomework();
                }
                setTimeout(()=>{
                    this.propsTitle();
                },300);
                document.documentElement.scrollTop=1;
                document.body.scrollTop=1;
            });
        },
        methods: {
            changeTime(id){
                this.timeShow=id;
                this.beginTime=new Date(`${new Date(new Date().getTime()).getFullYear()}/${new Date(new Date().getTime()).getMonth() + 1}/${new Date(new Date().getTime()).getDate()} 00:00:00`).getTime() / 1000;
                if(this.timeShow===0){
                    this.endTime=new Date(`${new Date(new Date().getTime()+86400000*365*5).getFullYear()}/${new Date(new Date().getTime()+86400000*365*5).getMonth() + 1}/${new Date(new Date().getTime()+86400000*365*5).getDate()} 23:59:59`).getTime() / 1000;
                }else if(this.timeShow==='show'){
                    this.endTime=new Date(`${new Date(new Date().getTime()).getFullYear()}/${new Date(new Date().getTime()).getMonth() + 1}/${new Date(new Date().getTime()).getDate()} 23:59:59`).getTime() / 1000;
                }else{
                    this.endTime=new Date(`${new Date(new Date().getTime()+86400000*id).getFullYear()}/${new Date(new Date().getTime()+86400000*id).getMonth() + 1}/${new Date(new Date().getTime()+86400000*id).getDate()} 23:59:59`).getTime() / 1000;
                }
            },
            propsTitle(){
                this.$util.JsBridge('propsTitle', {
                    title: '作业',
                }, (res) => {
                })
            },
            datePickerFormat(date, ifBegin){
                if (ifBegin) {
                    this.beginTime = new Date(`${new Date(date).getFullYear()}/${new Date(date).getMonth() + 1}/${new Date(date).getDate()} 00:00:00`).getTime() / 1000;
                    if(this.beginTime>this.endTime){
                        this.endTime=new Date(`${new Date(this.beginTime*1000).getFullYear()}/${new Date(this.beginTime*1000).getMonth() + 1}/${new Date(this.beginTime*1000).getDate()} 23:59:59`).getTime() / 1000;
                    }
                } else {
                    this.endTime = new Date(`${new Date(date).getFullYear()}/${new Date(date).getMonth() + 1}/${new Date(date).getDate()} 23:59:59`).getTime() / 1000;
                }
            },
            getDatePicker(start, end, now, ifBegin){
                this.$util.JsBridge('getDatePicker', {
                    minDate: start,
                    maxDate: end,
                    nowDate: now
                }, (res) => {
                    this.datePickerFormat(res, ifBegin)
                })
            },
            changeFile(type){
                //TODO:客户端上传文件
                if (9 - (this.oldPics.length+this.pices.length) > 0) {
                    this.$util.JsBridge('getPicesList', {
                        picItemCount: 9 - (this.oldPics.length+this.pices.length),
                        showType: type,
                        appType: 'APP_HOMEWORK'
                    }, (res) => {
                        this.changeFileCallBack(res);
                    })
                } else {
                    this.$toast('您最多只能上传9个附件');
                }
            },
            changeFileCallBack(res){
                this.imgKeys = res;
                for (let i = 0; i < res.length; i++) {
                    this.getImgInfo(res[i])
                }
            },
            getImgInfo(rs){
                this.$util.JsBridge('getImgInfo', {
                    fileKey: rs
                }, (res) => {
                    try {
                        if (res.datathumbnail && res.datathumbnail.indexOf('data:image/png;base64') == -1) {
                            res.datathumbnail = 'data:image/png;base64,' + res.datathumbnail;
                        }
                        res.imgUrl=rs;
                        res.type=res.datatype;
                        if(res.datatime){
                            res.time=res.datatime;
                        }
                        this.pices.push(res);
                    } catch (e) {
                        console.log(e.message)
                    }

                })
            },
            changeIfPub(){
                this.ifPub == 2 ? this.ifPub = 1 : this.ifPub = 2;
            },
            deleteItem(index, pices, ifOld){
                this.$delete(pices, index);
                if (ifOld)return;
                this.$util.JsBridge('removePicesItem', {
                    picItemIndex: index
                }, (res) => {
                })
            },
            showPicesSwiper(pic,index){
                let newIndex;
                let arr=[];
                if(pic.datatype){
                    newIndex=this.oldPics.length+index;
                }else{
                    newIndex=index;
                }
                this.oldPics.forEach((el)=>{
                    let newEl={from:2,type:el.type,imgUrl:imagedomain+el.imgUrl,time:el.time};
                    if (el.type == 3) {
                        newEl.coverUrl = imagedomain+el.imgUrl + '?vframe/jpeg/offset/1';
                    }
                    arr.push(newEl);
                });
                this.pices.forEach((el)=>{
                    let newEl={from:1,type:el.type,imgUrl:el.imgUrl,time:el.time};
                    arr.push(newEl);
                });
                this.$util.JsBridge('showPicesSwiper', {
                    picesList: arr,
                    picesIndex: newIndex
                }, (res) => {
                })
            },
            save(){
                if (this.checkFun()) {
                    if (this.canUploadClick) {
                        this.canUploadClick = false;
                        const content = this.$util.utf16toEntities(this.content).replace(/\n|\r\n/g, "<br>").replace(/[ ]/g, "&nbsp;");
                        let params = {
                            title: this.title,
                            content: content,
                            classes: this.classId,
                            picNum: this.pices.length,
                            beginTime: parseInt(this.beginTime),
                            endTime: parseInt(this.endTime),
                            version: 200
                        };
                        let response = api.sendHomework(params);
                        response.then((res) => {
                            if (res.code === 200) {
                                if (this.pices.length > 0) {
                                    this.$util.JsBridge('sendFinish', {
                                        taskTid: res.rs.taskTid,
                                        appType: 'APP_HOMEWORK',
                                        content: this.content,
                                        taskName: '作业',
                                        taskImageURL: this.domain + 'www/static/images/app_icon_v200/zuoye-3x.png'
                                    }, () => {})
                                } else {
                                    this.$toast('成功',true);
                                    setTimeout(()=>{
                                        this.closeWebView();
                                    },1000);
                                }
                            } else {
                                this.canUploadClick = true;
                                this.$util.sendLog(1,'APP_HOMEWORK',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'作业',code:'APP_HOMEWORK',path: '/app/homework/add',api:'sendHomework',success:false,data:res}));
                            }
                        }).catch(()=>{
                            this.canUploadClick = true;
                            this.$util.sendLog(1,'APP_HOMEWORK',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'作业',code:'APP_HOMEWORK',path: '/app/homework/add',api:'sendHomework',success:false,data:'网络异常'}));
                        })
                    } else {
                        this.$toast('上传中，请稍后');
                    }
                }
            },
            closeWebView() {
                this.$util.JsBridge('closeWebView', {}, () => {})
                this.$util.JsBridge('refreshAppCellInfo',{},()=>{})
            },
            checkFun(){
                let ifCheck = true;
                if (this.title === '') {
                    this.$toast('请填写作业标题');
                    ifCheck = false;
                    return ifCheck;
                }else if(this.titleCheck.test(this.title)){
                    this.$toast('标题内容不能包含表情');
                    ifCheck = false;
                    return ifCheck;
                }else if (this.content === ''&&(this.oldPics.length+this.pices.length)<=0) {
                    this.$toast('请填写作业内容或添加附件');
                    ifCheck = false;
                    return ifCheck;
                }else if (this.endTime < this.beginTime) {
                    this.$toast('开始时间不能大于结束时间');
                    ifCheck = false;
                    return ifCheck;
                }
                return ifCheck;
            },
            getSingleHomework(){
                let params = {
                    replyId: this.replyId
                };
                api.getSingleHomework(params).then((res) => {
                    let {code, rs} = res;
                    if (code == 200) {
                        if (rs.detailList && rs.detailList.length > 0) {
                            this.oldPics = rs.detailList;
                        }
                        if(rs.ifPub){
                            this.ifPub = rs.ifPub;
                        }
                        if (rs.content) {
                            this.content=this.$util.entitiestoUtf16(rs.content).replace(/<br>/ig,'\n').replace(/&nbsp;/g, ' ');
                        }
                    }else{
                        this.$util.sendLog(1,'APP_HOMEWORK',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'作业',code:'APP_HOMEWORK',path: '/app/homework/add',api:'getSingleHomework',success:false,data:res}));
                    }
                }).catch(()=>{
                    this.$util.sendLog(1,'APP_HOMEWORK',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'作业',code:'APP_HOMEWORK',path: '/app/homework/add',api:'getSingleHomework',success:false,data:'网络异常'}));
                })
            },
            submit() {
                if (this.pices.length + this.oldPics.length == 0) {
                    this.$toast('作业附件不能为空');
                    return;
                }
                if (!this.canUploadClick) {
                    this.$toast('提交中,请稍后');
                    return;
                }
                if (this.pices.length + this.oldPics.length <= 9) {
                    this.canUploadClick = false;
                    if (this.pices.length <= 0) {
                        this.submitHomework(this.oldPics);
                        return;
                    }
                    if (this.isPicSubmit) {
                        this.submitHomework(this.allPics);
                        return;
                    }
                    this.$util.JsBridge('submitFinish', {}, (result) => {
                        if (result.statuscode == 400) {
                            this.$toast('上传失败,请重新上传');
                            this.canUploadClick = true;
                        } else {
                            this.isPicSubmit = true;

                            let newResult = Object.prototype.toString.call(result) === '[object String]' ? JSON.parse(result) : result;
                            this.allPics = this.oldPics.concat(newResult);
                            this.submitHomework(this.allPics);
                        }
                    })
                } else {
                    this.canUploadClick = true;
                    this.$toast('上传附件不能超过九张');
                }
            },
            submitHomework(allPics){
                const content = this.$util.utf16toEntities(this.content).replace(/\n|\r\n/g, "<br>").replace(/[ ]/g, "&nbsp;");
                let param = {
                    ifPub: this.ifPub,
                    content: content,
                    classId: this.classId,
                    homeworkId: this.workId,
                    replyId: this.replyId,
                    data: JSON.stringify(allPics)
                };
                api.submitHomework(param).then((res) => {
                    let {code} = res;
                    if (code == 200) {
                        this.$toast('提交成功',true);
                        setTimeout(()=>{
                            this.$router.push({
                                path: '/app/homework/detail',
                                query: {classId: this.classId, role: this.role, appId: this.workId}
                            })
                        },1000)
                    } else {
                        this.canUploadClick = true;
                        this.$util.sendLog(1,'APP_HOMEWORK',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'作业',code:'APP_HOMEWORK',path: '/app/homework/add',api:'submitHomework',success:false,data:res}));
                    }
                }).catch(()=>{
                    this.canUploadClick = true;
                    this.$util.sendLog(1,'APP_HOMEWORK',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'作业',code:'APP_HOMEWORK',path: '/app/homework/add',api:'submitHomework',success:false,data:'网络异常'}));
                })
            },
        }
    }
</script>
<style scoped lang="scss">
    .play {
        height: 0.3rem;
        width: 0.3rem;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        z-index: 11;
        background: url("../../images/play.png") no-repeat center center/contain;
    }

    ::-webkit-input-placeholder {
        font-size: 0.13rem;
        color: #cccccc;
        line-height: 0.2rem;
    }

    .container {
        height: 100%;
        background: #0d0d0d;
        .padding {
            height: 0.12rem;
        }
        .titleInput {
            box-sizing: border-box;
            padding: 0 0.12rem;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.16);
            border-radius: 0.05rem;
            width: 3.51rem;
            height: 0.4rem;
            margin-bottom: 0.12rem;
            input {
                color: #ffffff;
                background: transparent;
                height: 100%;
                font-size: 0.13rem;
            }
        }
        /*发布作业区域*/
        .addArea {
            position: relative;
            background: rgba(255, 255, 255, 0.16);
            border-radius: 0.05rem;
            width: 3.51rem;
            margin: 0 auto;
            box-sizing: border-box;
            padding: 0.12rem;
            padding-bottom: 0.1rem;
            min-height: 1.59rem;

            /*文本输入框*/
            textarea {
                background: transparent;
                width: 100%;
                font-family: PingFangSC-Regular;
                font-size: 0.13rem;
                color: #cccccc;
                height: 1.32rem;
                outline: none;
                line-height: 0.2rem;
                margin-bottom: 0.42rem;
                box-sizing: content-box;
            }
            .textareaS{
                margin-bottom: 0.1rem !important;
            }
            /*附件区域*/
            .imgList {
                width: 100%;
                overflow: auto;
                -webkit-overflow-scrolling: touch;
                overflow-scrolling: touch;
                white-space: nowrap;
                padding-bottom: 0.4rem;
                .imgItem {
                    height: 0.68rem;
                    width: 0.68rem;
                    overflow: hidden;
                    margin-right: 0.06rem;
                    position: relative;
                    img {
                        height: 100%;
                        width: 100%;
                        -o-object-fit: cover;
                        object-fit: cover;
                    }
                    .deleteBtn {
                        position: absolute;
                        z-index: 1;
                        height: 0.15rem;
                        width: 0.15rem;
                        background: rgba(0, 0, 0, 0.5);
                        top: 0.02rem;
                        right: 0.02rem;
                        background: url("../../images/delete.png") no-repeat center center/contain;
                    }
                }
            }
            /*添加附件按钮*/
            .btnArea {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0.06rem;
                padding: 0 0.12rem;
                box-sizing: border-box;
                .leftArea {
                    .leftAreaInner{
                        margin-right: 0.24rem;
                        .imgBtn {
                            background: url("../../images/addPic.png") no-repeat center center/contain;
                            width: 0.18rem;
                            height: 0.18rem;
                            position: relative;
                        }
                        .audioBtn {
                            width: 0.18rem;
                            height: 0.18rem;
                            background: url("../../images/addAudio.png") no-repeat center center/contain;
                        }
                        .videoBtn {
                            width: 0.18rem;
                            height: 0.17rem;
                            position: relative;
                            background: url("../../images/addVideo.png") no-repeat center center/contain;
                        }
                        .leftAreaFont{
                            font-size: 0.09rem;
                        }
                    }

                }
                .rightArea {
                    opacity: 0.4;
                }
            }

        }
        .homeworkTimeWrapper{
            padding-top: 0.18rem;
            .timeTitle{
                padding: 0 0.12rem;
            }
            .timeList{
                padding:0.12rem;
                .timeItem{
                    background:rgba(255,255,255,0.16);
                    border-radius:0.06rem;
                    width:0.58rem;
                    height:0.24rem;
                }
                .timeFocus{
                    background:#17A5AF;
                    opacity: 1;
                }
            }
        }
        .timeArea {
            .timeTop {
                padding: 0.3rem 0.72rem 0.33rem 0.72rem;
                font-family: PingFangSC-Regular;
                font-size: 0.12rem;
                color: #8e8e93;
            }
            .timeBottom {
                padding: 0 0.24rem;
                padding-bottom: 1rem;
                .timeSelect {
                    font-size: 0.15rem;
                    box-sizing: border-box;
                    padding: 0 0.24rem;
                    height: 0.33rem;
                    border-top: 0.5px solid rgba(255,255,255,0.1);
                    border-bottom: 0.5px solid rgba(255,255,255,0.1);
                    width: 1.5rem;
                }
            }
        }
    }

    .publicArea {
        height: 0.37rem;
        font-size: 0.12rem;
        padding: 0 0.12rem;
        background: rgba(255, 255, 255, .16);
        margin-top: 0.24rem;
    }

    .saveBtn {
        background: rgba(255, 255, 255, .16);
        border-radius: 0.06rem;
        width: 1.8rem;
        height: 0.36rem;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0.24rem;
        font-family: PingFangSC-Regular;
        font-size: 0.13rem;
        color: #ffffff;
        margin: auto;
        z-index: 99;
    }

    .saveBtn:active {
        background: rgba(0, 0, 0, 0.9) !important;
    }

    ;
    .panelContainer {
        padding: 0 0.06rem;
    }

    .publicRight {
        p {
            color: #ffffff;
            opacity: 0.7;
            font-size: 0.1rem;
        }
    }

    .panelWrap {
        background: #ffffff;
        border: 0.5px solid rgba(0, 0, 0, 0.10);
        border-radius: 0.54rem;
        width: 0.37rem;
        height: 0.19rem;
        -webkit-animation: changeWrap 0.5s;
        -webkit-animation-fill-mode: forwards;
        .panel {
            background: #ffffff;
            border: 0 solid rgba(0, 0, 0, 0.10);
            box-shadow: 0 0.03rem 0.01rem 0 rgba(0, 0, 0, 0.05), 0 0.02rem 0.02rem 0 rgba(0, 0, 0, 0.10), 0 0.03rem 0.03rem 0 rgba(0, 0, 0, 0.05);
            width: 0.16rem;
            height: 0.16rem;
            border-radius: 100%;
            transform: transLateX(0);
            -webkit-animation: changePanel 0.3s;
            -webkit-animation-fill-mode: forwards;
        }
    }

    .panelWrapFocus {
        background: #1dc6b4;
        border: 0.5px solid rgba(0, 0, 0, 0.10);
        border-radius: 0.54rem;
        width: 0.37rem;
        height: 0.19rem;
        -webkit-animation: changeWrapFocus 0.5s;
        -webkit-animation-fill-mode: forwards;
        .panel {
            background: #ffffff;
            border: 0 solid rgba(0, 0, 0, 0.10);
            box-shadow: 0 0.03rem 0.01rem 0 rgba(0, 0, 0, 0.05), 0 0.02rem 0.02rem 0 rgba(0, 0, 0, 0.10), 0 0.03rem 0.03rem 0 rgba(0, 0, 0, 0.05);
            width: 0.16rem;
            height: 0.16rem;
            border-radius: 100%;
            -webkit-animation: changePanelFocus 0.3s;
            -webkit-animation-fill-mode: forwards;
        }
    }
    @-webkit-keyframes changePanelFocus {
        from {
            -webkit-transform: transLateX(0)
        }
        to {
            -webkit-transform: transLateX(0.19rem)
        }
    }

    @-webkit-keyframes changePanel {
        from {
            -webkit-transform: transLateX(0.19rem)
        }
        to {
            -webkit-transform: transLateX(0)
        }
    }

    @-webkit-keyframes changeWrapFocus {
        from {
            background: rgba(255, 255, 255, 0.3)
        }
        to {
            background: #1dc6b4
        }
    }

    @-webkit-keyframes changeWrap {
        from {
            background: #1dc6b4
        }
        to {
            background: rgba(255, 255, 255, 0.3)
        }
    }
</style>
